<?php
//Linguaggio settato a 'und'
$lang = LANGUAGE_NONE;
/**
 * API KEY 
 * 
 * GIOVANNI: 
 * 			AIzaSyDBGTSz6GXiQ5PevQzhmCqMvmUuLyauO8Q
 * 			AIzaSyAEvxYKCtvTd5AZSHYgHW2oWeg3x_FA8Ww
 */

drupal_add_js('https://maps.googleapis.com/maps/api/js?key=AIzaSyAEvxYKCtvTd5AZSHYgHW2oWeg3x_FA8Ww',array('type' => 'external','scope' => 'header'));

$tot_contatti = count($node->field_contatti[$lang]);
$blocco_2 = '';
$k = 1;
foreach ($node->field_contatti[$lang] as $elem) {
	$contatto = field_collection_item_load($elem);
	$contatto_title = (isset($contatto->field_titolo_sezione[$lang]))?$contatto->field_titolo_sezione[$lang][0]['value']:'';
	$contatto_icona_blu = (isset($contatto->field_icona_blu[$lang]))?'<img src="'.file_create_url($contatto->field_icona_blu[$lang][0]['uri']).'" />':'';
	$contatto_icona_bianca = (isset($contatto->field_icona_bianca[$lang]))?'<img src="'.file_create_url($contatto->field_icona_bianca[$lang][0]['uri']).'" />':'';
	$contatto_descrizione = (isset($contatto->field_descrizione[$lang]))?$contatto->field_descrizione[$lang][0]['value']:'';
	$contatto_indirizzo = (isset($contatto->field_indirizzo[$lang]))?$contatto->field_indirizzo[$lang][0]['value']:'';
	$contatto_telefono_1 = (isset($contatto->field_telefono[$lang][0]))?'<span>'.$contatto->field_telefono[$lang][0]['value'].'</span>':'';
	$contatto_telefono_2 = (isset($contatto->field_telefono[$lang][1]))?'<span>'.$contatto->field_telefono[$lang][1]['value'].'</span>':'';
	$contatto_email_1 = (isset($contatto->field_email[$lang][0]))?'<span>'.$contatto->field_email[$lang][0]['value'].'</span>':'';
	$contatto_email_2 = (isset($contatto->field_email[$lang][1]))?'<span>'.$contatto->field_email[$lang][1]['value'].'</span>':'';
	$contatto_lat = (isset($contatto->field_lat[$lang]))?trim($contatto->field_lat[$lang][0]['value']):'';
	$contatto_lon =  (isset($contatto->field_lon[$lang]))?trim($contatto->field_lon[$lang][0]['value']):'';
	$display_1 = '';
	$display_2 = 'style="display:none;"';
	if($k == 1){
		$map_first = 'var lat = "'.$contatto_lat.'";
					  var lon = "'.$contatto_lon.'";
					  google.maps.event.addDomListener(window, \'load\', function () { initialize(lat,lon); });';
	}
	if($k > 1){
		$display_1 = 'style="display:none;"';	
		$display_2 = '';
	}
	$blocco_2 .= '<div class="left" id="scheda_sede_'.$k.'" '.$display_1.'>
		<div class="titolo">
			<div class="icona">
				'.$contatto_icona_bianca.'
			</div>
			<div class="testo">
				'.$contatto_title.'
			</div>
		</div>
		<div class="clear"></div>
		<div class="sottotitolo">
			'.$contatto_indirizzo.'
		</div>
		<div class="descrizione">
			'.$contatto_descrizione.'
		</div>
		<div class="contatti">
			<div class="telefono">
				'.$contatto_telefono_1.' '.$contatto_telefono_2.'
			</div>
			<div class="mail">
				'.$contatto_email_1.' '.$contatto_email_2.'
			</div>
		</div>
	</div>';
	$blocco_4 .= '<div class="blocco_4 class_sede_'.$k.'" '.$display_2.'>
			<!-- primo riquadro -->
			<div class="riquadro riquadro_1">
				<div class="titolo ">
					<div class="icona">
						'.$contatto_icona_blu.'
					</div>
					<div class="testo">
						'.$contatto_title.'
					</div>
				</div>
			</div>
			<!-- /primo riquadro -->
			<!-- secondo riquadro -->
			<div class="riquadro riquadro_2">
				<div class="testo">
						'.$contatto_indirizzo.'
				</div>
			</div>
			<!-- /secondo riquadro -->
			<!-- terzo riquadro -->
			<div class="riquadro riquadro_3">
				<div class="testo">
					'.$contatto_email_1.' '.$contatto_email_2.'
				</div>
			</div>
			<!-- /terzo riquadro -->
			<!-- quarto riquadro -->
			<div class="riquadro riquadro_4">
				<div class="show_map" id="sede_'.$k.'">
					SHOW ON THE MAP
				</div>
			</div>
			<!-- /quarto riquadro -->
		</div>';
	$body_js .= '$(\'#sede_'.$k.'\').click(function () {
		var lat_'.$k.' = "'.$contatto_lat.'";
		var lon_'.$k.' = "'.$contatto_lon.'";
		resetMap(lat_'.$k.',lon_'.$k.');
		$(\'.blocco_2 .left\').hide();		
		$(\'#scheda_sede_'.$k.'\').show();		
		$(\'.blocco_4.class_sede_'.$k.'\').hide();
		$(\'.blocco_4.\'+sede_selected).show();
		window.sede_selected = \'class_sede_'.$k.'\';
	});'; 
	
	
	$k++;
}
$blocco_js = '$(document).ready(function() {
					//INIZIALIZED MAPS
					'.$map_first.'
					window.sede_selected = \'class_sede_1\';
					'.$body_js.'	
			  });';
drupal_add_js($blocco_js,'inline');

?>
<script type="text/javascript">
<!--
var map;
var marker;
function initialize(lat, lon) {
  var myLatlng = new google.maps.LatLng(lat,lon);
  var mapOptions = {
    zoom: 15,
    center: myLatlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
  });
}
function resetMap(lat,lon) {
	// separate into lat and long
    var newPos = new google.maps.LatLng(lat, lon);
    map.setOptions({
        center: newPos,
        zoom: 15
    });

    //add a marker
    marker.setMap(null);
    marker.setPosition(newPos);
    marker.setMap(map);
}   
//-->
</script>
<!-- RIGHT -->
<div class="monoblocco">
	<div class="contenuto">
		<div class="titolo_sezione">
			<?php print render($content['field_titolo_sezione']); ?>
		</div>
		<div class="clear"></div>
		<!-- INIZIO BLOCCO DIVISO IN 2 -->
		<div class="blocco_2">
		<?php print $blocco_2; ?>	
			<div class="right">
				  <div id="map-canvas"></div>
			</div>
		</div>
		<!-- FINE BLOCCO DIVISO IN 2 -->						
		<div class="clear"></div>
		<!-- SEDE OPERATIVA - INIZIO BLOCCO DIVISO IN 4 -->
		<?php print $blocco_4;?>
		<!-- /SEDE OPERATIVA - FINE BLOCCO DIVISO IN 4 -->	
	</div>
</div>
<!-- /RIGHT -->	